<template>
  <el-card class="box-card">
    <div class="card-header">
      <h3>充电详情</h3>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div>终端编号: {{ details.pileCode }}</div>
        <div>充电功率: {{ details.pilePower }} kW</div>
        <div>订单编号: {{ details.orderNumber || '暂无' }}</div>
        <div>开始时间: {{ details.createTime || '暂无' }}</div>
      </el-col>
      <el-col :span="12">
        <div>当前电量: {{ details.electricityQuantity || 0 }} kWh</div>
        <div>预计费用: {{ details.amount || 0 }} 元</div>
        <div>充电百分比: {{ details.percentage || 0 }}%</div>
        <div>预计剩余时间: {{ details.remainingTime || '暂无' }} 小时</div>
      </el-col>
    </el-row>
    <el-button
        v-if="!isCharging"
        type="primary"
        class="start-button"
        @click="startCharging"
    >
      开始充电
    </el-button>
    <el-button
        v-else
        type="danger"
        class="stop-button"
        @click="stopCharging"
    >
      停止充电
    </el-button>
  </el-card>
</template>

<script>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {ElMessage} from 'element-plus';
import axios from 'axios';

export default {
  name: 'ChargingDetails',
  props: {
    pileId: {
      type: Number,
      required: false,
      default: 1, // 默认值为 1
    },
  },
  setup(props) {
    const details = ref({
      pileCode: '', // 终端编号
      pilePower: 0, // 充电功率
      orderNumber: '',
      createTime: '',
      electricityQuantity: 0,
      amount: 0,
      remainingTime: 0,
      percentage: 0,
    });
    const isCharging = ref(false);
    const intervalId = ref(null);

    // 根据 pileId 获取充电桩信息
    const fetchPileDetails = async () => {
      try {
        const response = await axios.get(`/charging/pile/${props.pileId}`);
        details.value.pileCode = response.data.pileCode;
        details.value.pilePower = response.data.pilePower;
      } catch (error) {
        ElMessage.error('获取充电桩详情失败');
      }
    };

    // 点击开始充电
    const startCharging = async () => {
      try {
        const payload = {
          customerId: 1,
          pileId: props.pileId,
          stationId: 1,
        };
        const response = await axios.post('/charging/start', payload);
        const orderNumber = response.data.order_number;

        ElMessage.success('充电已启动');
        details.value.orderNumber = orderNumber;
        details.value.createTime = new Date().toLocaleString();
        isCharging.value = true;

        // 开启定时刷新
        startRefreshing(orderNumber);
      } catch (error) {
        ElMessage.error('启动充电失败');
      }
    };

    // 停止充电
    const stopCharging = async () => {
      try {
        await axios.post(`/charging/stop/${details.value.orderNumber}`);
        ElMessage.success('充电已停止');
        isCharging.value = false;

        // 清除定时刷新
        clearInterval(intervalId.value);
      } catch (error) {
        ElMessage.error('停止充电失败');
      }
    };

    // 获取充电详情
    const fetchDetails = async (orderNumber) => {
      try {
        const response = await axios.get(`/charging/details/${orderNumber}`);
        details.value = response.data;
      } catch (error) {
        ElMessage.error('获取充电详情失败');
      }
    };

    // 定时刷新充电详情
    const startRefreshing = (orderNumber) => {
      fetchDetails(orderNumber); // 立即刷新一次
      intervalId.value = setInterval(() => {
        fetchDetails(orderNumber);
      }, 5000);
    };

    // 组件卸载时清除定时器
    onBeforeUnmount(() => {
      if (intervalId.value) {

        clearInterval(intervalId.value);
      }
    });

    // 页面加载时获取桩信息
    onMounted(() => {
      fetchPileDetails();
    });

    return {
      details,
      isCharging,
      startCharging,
      stopCharging,
    };
  },
};
</script>

<style scoped>
.box-card {
  margin: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.start-button,
.stop-button {
  margin-top: 20px;
  width: 100%;
}

.stop-button {
  background-color: red;
  color: white;
}
</style>
